import React, { useContext, useEffect, useState } from 'react';
import axios from 'axios';

const GlobalContext = React.createContext();

function Film(props) {
      let {name,detail} = props;
      const value = useContext(GlobalContext);
          //消费者模式
        return(
            <div>
            <span style={{cursor:'pointer'}} onClick={()=>{
            value.changeDetail(detail)
            }}>{name}</span>
            </div>
        )
  }

export default function App() {
      const [list,setlist] =useState([]);
      const [detail,setdetail] =useState('');
      useEffect(()=>{
        axios({
            url:'https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=3889594',
            headers:{
              'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"165294070798642513887233"}',
              'X-Host': 'mall.film-ticket.film.list'
            }
        }).then(res =>{
            setlist(res.data.data.films);
            console.log(res.data.data.films);
        })
      },[])
      return (
        <GlobalContext.Provider value={   //生产者模式
          {
            detail,
            changeDetail:(zhi)=>{
              setdetail(zhi);
            }
          }
        }>
          <div>
            {
              list.map((item)=>
                <Film key={item.filmId} name={item.name} detail={item.synopsis}></Film>
              )
            }
            <Film2 detail={detail}></Film2>
         </div>
        </GlobalContext.Provider>
      )
  }



function Film2(){
    const value = useContext(GlobalContext);
        return (
            <div style={{
                background:'yellow',
                position:'fixed',
                right:0,
                width:'300px',
                height:'300px'
                }}>{value.detail}
            </div>
        )
}

